import React from 'react';
import './index.css';
// import { connect } from 'react-redux';
// import TodoList from '../../components/TodoList';
// import { toggleTodo } from '../../actions';

// const mapStateToProps = (state) => {
//     return {
//         todos: state
//     }
// }

// const mapDispathToProps = (dispatch) => {
//     return {
//         onTodoClick: (id) => dispatch(toggleTodo(id))
//     }
// }

// export default connect(
//     mapStateToProps,
//     mapDispathToProps
// )(TodoList)

import { Icon, Button, Input, AutoComplete } from 'antd';

const { Option } = AutoComplete;

const Search = Input.Search;


function onSelect(value) {
  console.log('onSelect', value);
}

function getRandomInt(max, min = 0) {
  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
}

function searchResult(query) {
  return new Array(getRandomInt(5))
    .join('.')
    .split('.')
    .map((item, idx) => ({
      query,
      category: `${query}${idx}`,
      count: getRandomInt(200, 100),
    }));
}

function renderOption(item) {
  return (
    <Option key={item.category} text={item.category}>
      <div className="global-search-item">
        <span className="global-search-item-desc">
          {item.query} 在
          <a
            href={`https://s.taobao.com/search?q=${item.query}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {item.category}
          </a>
          区块中
        </span>
        <span className="global-search-item-count">约 {item.count} 个结果</span>
      </div>
    </Option>
  );
}

class Complete extends React.Component {
  state = {
    dataSource: [],
    regTest: false,
    loadData: [],
  };

  handleSearch = value => {
    if (value.length > 10) {
      let regExt = /^[0-9a-zA-Z;；]*$/g;
      let val = value.replace(/\s+/g,"");
      let skuList;
      if ( regExt.test(val) ) {
        let fen = /[;；]+/g;
        skuList = val.split(fen).filter(v => v !== "")
        console.log('符合条件', skuList)
        if (true) {
          this.setState({
            regTest: false,
            dataSource: skuList
          })
          console.log(this.state.dataSource)
        }
      }else {
        this.setState({
          regTest: true,
          dataSource: ['没有结果']
        })
      }
    }

  };

  handleClick = value => {
  	// let regExt = /^[0-9]+[;；]+\s*/;
  	// let val = value.replace(/\s+/g,"");
  	// let loadData;
  	// if ( regExt.test(val) ) {
  	// 	let fen = /[;；]+/g;
  	// 	loadData = val.split(fen).filter(v => v !== "")
  	// 	this.setState({
  	// 		regTest: false,
  	// 		loadData
  	// 	}, () => {
  	// 		console.log(this.state.loadData)
  	// 	})
  	// }else {
  	// 	this.setState({
  	// 		regTest: true
  	// 	})
  	// }
    console.log(this.state.dataSource)

  }

  render() {
    const { dataSource, regTest } = this.state;
    return (
      <div className="global-search-wrapper" style={{ width: 300 }}>
        <AutoComplete
          className="global-search"
          size="large"
          style={{ width: '100%', border: regTest ? '1px solid red': 'none' }}
          dataSource={dataSource}
          // onSelect={onSelect}
          onSearch={this.handleSearch.bind(this)}
          optionLabelProp="text"
        >
          <Search
			      placeholder="input search text"
			      enterButton="Search"
			      size="large"
			      onSearch={this.handleClick}
			    />
        </AutoComplete>
      </div>
    );
  }
}

export default Complete;